const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
const { options } = require('less')

module.exports = {
    //开发环境挑错
    devtool: 'inline-source-map',
    //打包 
    // 生产模式 production(代码被压缩)
    // 开发模式 development
    mode: 'production',
    //入口
    entry: path.resolve(__dirname, './src/main.js'),
    //出口
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'app.js'
    },
    //插件
    plugins: [
        new htmlWebpackPlugin({
            template: path.resolve(__dirname, './public/index.html')
        })
    ],
    //模块加载器
    module: {
        //匹配规则（数组）
        rules: [
            //打包css
            {
                test: /\.css$/i, //通过正则匹配后缀名
                use: ["style-loader", "css-loader"],//加载器是从后往前处理
            },
            //打包less
            {
                test: /\.less$/i,
                use: ["style-loader", "css-loader", "less-loader"]
            },
            //处理图片资源  webpack5
            {
                test: /\.(png|svg|jpg|jpeg|gif)/i,
                type: 'asset',
                generator: {
                    //[hash]文件唯一标识
                    //[ext] 文件后缀名
                    filename: 'asset/[hash][ext]'
                }
            },
            {
                // 匹配所有 .js 和 .mjs 文件
                test: /\.m?js$/,
                // 排除 node_modules 和 bower_components 目录下的文件
                exclude: /(node_modules|bower_components)/,
                // 使用 babel-loader 处理匹配到的文件
                use: {
                    loader: 'babel-loader',
                    options: {
                        // 使用 @babel/preset-env 预设进行转译
                        presets: ['@babel/preset-env']
                    }
                }
            },
        ]
    },
    resolve: {
        alias: {
            MyUtils: path.resolve(__dirname, 'src/utils'),
            '@':path.resolve(__dirname,'src')
        }
    }
}